<template>
	<view class="container public__contain">
		<view class="select-header">
			<image class="headerBg" src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/076a9202007061021275354.png"
			 mode=""></image>
			<uni-nav-bar fixed="ture" statusBar="true" @clickLeft="back" leftIcon="back" title="会员权益" :color="navColor"
			 :background="navBG">
			</uni-nav-bar>
			<swiper :current="current" class="carousel" @change="change">
				<swiper-item v-for="(item, index) in cardList" :key="index" class="carousel-item">
					<view class="item">
						<image class="item-img" lazy-load :src="item.image" />
						<view class="vipInfo">
							<view class="top">
								<image class="a" :src="userInfo.avatar" mode=""></image>
								<text class="b">{{userInfo.nickname}}</text>
								<view class="c" v-if="userInfo.level == index + 1">
									<image src="../../../static/images/mall/fsd.png" mode=""></image>
									<text>{{userInfo.vip_card_name||''}}</text>
								</view>
							</view>
							<view class="bottom">
								<view class="up">
									<text class="left" v-if="userInfo.level == index + 1">会员将于 {{userInfo.valid_time||''}} 到期</text>
									<text class="left" v-else></text>
									<view class="right" @tap="gointerests(item.id)">
										<text class="lebal">查看会员的权益</text>
										<text class="yticon icon-you"></text>
									</view>
								</view>
								<view class="down">
									<view class="a btn" v-if="userInfo.level == 0" @tap="buygrade">购买</view>
									<view class="a btn" v-if="userInfo.level == 1&&index == 1" @tap="upgrade">购买</view>
									<view class="a btn" v-if="userInfo.level == 1&&index == 0" @tap="upgrade">升级</view>
									<view class="b btn" v-if="userInfo.is_renewal&&userInfo.level == index + 1" @tap="renew">续费</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view :class="current == 0?'act':''" class="a"></view>
				<view :class="current == 1?'act':''" class="a"></view>
			</view>
		</view>
		<!-- 旅游卡 -->
		<view class="tourismCard" v-show="current == 1">
			<view class="tapBox">
				<view class="cardListTab">
					<text class="tit">旅游卡</text>
					<view class="recode">
						<text class="text" @tap="tourismCardRecord">旅游卡记录</text>
						<text class="yticon icon-you"></text>
					</view>
				</view>
			</view>
			<view class="card" v-if="userInfo.level !== 2">
				<view class="label" v-if="TourismListdata.k2Config">{{TourismListdata.k2Config.sub_title}}</view>
				<view class="left">
					<view class="cardName">
						<text class="name" v-if="TourismListdata.k2Config">{{TourismListdata.k2Config.title}}</text>
					</view>
				</view>
				<view class="right">
					<view class="btn" @tap="upgrade">开通K2</view>
				</view>
			</view>
			<view class="card" v-for="(item,index) in TourismListA" :key="index">
				<view class="left">
					<view class="cardName">
						<text class="name">{{TourismListdata.waitConfig.title}}</text>
					</view>
					<text class="cardDesc">{{TourismListdata.waitConfig.sub_title}}</text>
				</view>
				<view class="right">
					<view class="btn" @tap="activationTourismCard(item)">激活</view>
				</view>
			</view>
			<view class="card" :class="index + 1 == TourismListB.length?'marginNone':''" v-for="(item,index) in TourismListB"
			 :key="item.id">
				<view class="left">
					<view class="cardName">
						<text class="name">{{TourismListdata.waitConfig.title}}</text>
					</view>
					<view class="a">
						<text class="c">{{item.card_number}}</text>
						<text class="d">{{item.realname}}</text>
					</view>
					<view class="b">
						<text class="c">有效期至</text>
						<text class="d">{{item.validtime_str}}</text>
					</view>
				</view>
				<view class="right">
					<view class="btn" @tap="useTourismCard(item)">使用</view>
				</view>
			</view>
		</view>
		<!-- 提货卡 -->
		<view class="pickCard" v-show="current == 1">
			<view class="tapBox">
				<view class="cardListTab">
					<!-- <image class="cardIcon" src="../../../static/images/center/dsf232.png" mode=""></image> -->
					<text class="tit">提货卡</text>
					<view class="recode">
						<text class="text" @tap="pickCardRecord">提货卡记录</text>
						<text class="yticon icon-you"></text>
					</view>
				</view>
			</view>
			<view class="card" v-for="(item,index) in pickCardList" :key="index">
				<view class="left">
					<view class="cardName">
						<text class="name">{{item.name}}</text>
						<view class="a">
							<text class="status" v-if="item.status == 0&&[3].includes(item.is_unpaid)" @tap="payOrder(item)">打款凭证审核中</text>
							<text class="status" v-if="item.status == 0&&[4].includes(item.is_unpaid)" @tap="payOrder(item)">打款凭证审核失败</text>
							<text class="status" v-if="item.status == -1" @tap="signedContract(item.order_id,item.status)">待签署购买合同</text>
							<text class="status" v-if="item.status == 7" @tap="signedContract(item.order_id,item.status)">购买合同审核中</text>
							<text class="status" v-if="item.status == 8" @tap="signedContract(item.order_id,item.status)">购买合同审核失败</text>
							<text class="status" v-if="item.status == 1" @tap="userCard(item.id,item.order_id)">待使用</text>
							<text class="status" v-if="item.status == 2" @tap="offlineContact(item.order_id)">待签署收购合同</text>
							<text class="status" v-if="item.status == 9" @tap="offlineContact(item.order_id)">收购合同审核中</text>
							<text class="status" v-if="item.status == 10" @tap="payOrder(item)">收购合同审核失败</text>
							<text class="yticon icon-you" v-if="item.status != 0"></text>
							<text class="yticon icon-you" v-if="[3,4].includes(item.is_unpaid)"></text>
						</view>
					</view>
					<text class="cardDesc" v-if="item.status == 0">{{item.desc}}</text>
					<view class="b" v-else>
						<text class="c">剩余卡值</text>
						<text class="d">{{item.card_value}}</text>
					</view>
				</view>
				<view class="right">
					<view class="btn" v-if="item.status == 0&&item.is_unpaid == 0" @tap="buyPickCard(item)">立即购买</view>
					<view class="btn" v-if="item.status == 0&&[1,2].includes(item.is_unpaid)" @tap="payOrder(item)">待支付</view>
					<view class="b" v-if="item.status == 0&&[1,2].includes(item.is_unpaid)&&item.pay_valid_time">
						<!-- <text class="c">剩余时间：</text> -->
						<text class="d">{{pickCardTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务卡 -->
		<view class="content">
			<!-- #ifdef MP-WEIXIN -->
			<view class="tapBox" :style="{top:fixTop + 44 + 'px'}">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="tapBox">
					<!-- #endif -->
					<view class="cardListTab">
						<!-- <image class="card" src="../../../static/images/center/sdf1233.png" mode=""></image> -->
						<text class="tit">服务卡</text>
						<view class="recode">
							<text class="text" @tap="serviceRecord">服务卡记录</text>
							<text class="yticon icon-you"></text>
						</view>
					</view>
				</view>
				<view class="cardList">
					<view class="cardItem" v-for="(item,index) in serviceList" :key="index">
						<image class="bg" :src="item.image" mode=""></image>
						<view class="top">
							<view class="left">
								<view class="a">
									<text class="a-a">{{item.name}}</text>
									<text class="a-b">{{item.cate_name}}</text>
								</view>
								<view class="b" v-if="item.cate_name == '次卡'">
									<image src="../../../static/images/mall/ds.png" mode=""></image>
									<text>{{item.money}}</text>
								</view>
								<view class="c" v-if="item.cate_name == '次卡'">
									<image src="../../../static/images/mall/ads.png" mode=""></image>
									<text>{{item.date_or_num}}</text>
								</view>
								<view class="c" v-if="item.cate_name == '期卡'&&item.service_status == 0">
									<image src="../../../static/images/mall/ds.png" mode=""></image>
									<text>{{item.money}}</text>
								</view>
								<view class="c" v-if="item.cate_name == '期卡'">
									<image src="../../../static/images/mall/ads.png" mode=""></image>
									<text>{{item.date_or_num}}</text>
								</view>
								<view class="c" v-if="item.cate_name == '期卡'&&item.service_status !== 0">
									<image style="opacity: 0;" src="../../../static/images/mall/ds.png" mode=""></image>
								</view>
								<view class="d" @tap="cardDetail(item)">
									<text class="da">产品详情</text>
									<text class="yticon icon-shang" v-show="item.detailShow"></text>
									<text class="yticon icon-xia" v-show="!item.detailShow"></text>
								</view>
							</view>
							<view class="serviceing" v-if="item.service_status == 3">
								{{item.service_status_desc}}
							</view>
							<view class="right">
								<view class="btn buy" v-if="item.service_status == 0" @tap="goBuy(item)">
									<text v-if="item.is_exist == 0">
										购买
									</text>
									<text class="wait" v-if="item.is_exist == 1">
										待支付
									</text>
								</view>
								<view class="btn apply" v-else-if="item.service_status == 1" @tap="goApply(item.order_id)">
									<text>
										{{item.service_status_desc}}
									</text>
								</view>
								<view class="time" v-if="item.service_status == 1&&item.cate_name=='期卡'">
									<text v-if="item.serviceCardTime">
										剩余 {{item.serviceCardTime||""}}
									</text>
								</view>
								<view class="btn service" v-else-if="item.service_status == 2">
									<text>
										{{item.service_status_desc}}
									</text>
								</view>
								<view class="btn service" v-else-if="item.service_status == 3" @tap="endService(item.order_sn)">
									<text>
										结束服务
									</text>
								</view>
								<view class="btn service" v-else-if="item.service_status == 4">
									<text>
										结束中
									</text>
								</view>

							</view>
						</view>
						<view class="bottom" v-show="item.detailShow">
							<image :src="item.detail" mode="widthFix"></image>
						</view>
					</view>
					<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
				</view>
			</view>
			<z-modal ref="zmodal1" content="请选择使用方式" confirmText="申请收购" cancelText="专区提货" @confirm="confirm" @cancel="cancel"></z-modal>
			<z-modal ref="zmodal2" content="购买提货卡需先成为K2会员" confirmText="确定" :cancelShow="false"></z-modal>
			<z-modal ref="zmodal3" content="确定申请服务？" confirmText="确定" cancelText="取消" @confirm="onOnConfirm"></z-modal>
			<z-modal ref="zmodal4" :content="'购买此服务卡需先成为k' + serviceLevel + '会员'" confirmText="确定" :cancelShow="false"></z-modal>
		</view>
</template>

<script>
	import {
		serviceList,
		serviceApply,
		serviceEnd,
		cardInfo,
		deliveryList,
		offlineWrite,
		travelGetCardList
	} from "@/api/user.js"
	import utils from "@/common/utils.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import zModal from "@/components/z-modal/z-modal.vue"
	export default {
		components: {
			uniNavBar,
			uniLoadMore,
			zModal
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				fixTop: getApp().globalData.MenuButtonTop - 6, //小程序顶部兼容
				// #endif
				navColor: '#fff',
				navBG: 'inherit',
				cardbg: '',
				serviceList: [],
				TourismListdata: {},
				TourismListA: [],
				TourismListB: [],
				current: 0,
				active: true,
				cardList: [],
				userInfo: {},
				loadStatus: "loading",
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
				pickCardList: [],
				pickCardTime: "00:00:00",
				pickTime: null,
				serviceTime: null,
				card_id: null,
				oid: null,
				z: 0,
				serviceId: null,
				serviceLevel: 0,
			}
		},
		onShow() {
			cardInfo().then(res => {
				this.cardList = res.data.cardInfo
				uni.setStorageSync("cardList", this.cardList)
				this.userInfo = uni.getStorageSync("userInfo")
				if(this.userInfo.level>0) {
					this.current = this.userInfo.level - 1
				}
				
				// 保证倒计时能进行
				setInterval(() => {
					this.z++
				}, 1000);
				this.getDeliveryList();
				this.getServiceList();
				this.getTourismList()
			})
		},
		onPullDownRefresh() {
			this.getDeliveryList();
			this.getServiceList();
		},
		onPageScroll(e) {
			this.navBG = "rgba(255,255,255," + e.scrollTop / 100 + ')'
			if (e.scrollTop > 10) {
				this.navColor = "rgba(0,0,0," + e.scrollTop / 100 + ')'
			} else {
				this.navBg = "inherit"
				this.navColor = '#fff'
			}
		},
		methods: {
			// *************************会员卡**********************
			// 购买会员
			buygrade() {
				uni.navigateTo({
					url: "./buyVip"
				})
			},
			// 会员升级
			upgrade() {
				uni.navigateTo({
					url: "./buyVip?type=upgrade"
				})
			},
			// 续费
			renew() {
				uni.navigateTo({
					url: "./buyVip?type=renew"
				})
			},
			//查看权益
			gointerests(id) {
				uni.navigateTo({
					url: "/pages/center/vip/vip?level=" + id
				})
			},
			// *************************旅游卡**********************
			tourismCardRecord() {
				uni.navigateTo({
					url: "./tourismCardRecorde?title=" + this.TourismListdata.k2Config.title
				})
			},
			getTourismList() {
				travelGetCardList().then(res => {
					this.TourismListdata = res.data.travelConfig
					this.TourismListA = res.data.waitList
					this.TourismListB = res.data.activationList.map((val, key) => {
						val.validtime_str = val.validtime_str.slice(0,10)
						return val
					})
				})
			},

			activationTourismCard(item) {
				uni.navigateTo({
					url: "./tourismCardAct?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			useTourismCard(item) {
				uni.setStorageSync("tourismCardNo", item.id)
				uni.navigateTo({
					url: "./tourismLandmark"
				})
			},
			// *************************提货卡**********************
			getDeliveryList() {
				// status：0 可购买 1待使用 2线下提货 3线上提货
				deliveryList().then(res => {
					setTimeout(function() {
						uni.stopPullDownRefresh();
					}, 1000);
					this.pickCardList = res.data.list
					let _this = this
					this.pickCardList.forEach((item, index) => {
						if (item.pay_valid_time > 0) {
							clearInterval(this.pickTime)
							this.pickTime = setInterval(() => {
								_this.pickCardTime = utils.timeCount(item.pay_valid_time)
							}, 1000);
						}
					})
				})
			},
			//跳转提货列表
			pickRecord() {
				uni.navigateTo({
					url: `/mall/pickCardMall/pickCardOrder?status=pick`
				})
			},
			// 购买提货卡跳转提货卡协议
			buyPickCard(item) {
				if (this.userInfo.level < 2) {
					this.$refs.zmodal2.show()
					return
				}
				let a = 0
				let b = 0
				this.pickCardList.forEach(item => {
					if (item.status != 0 && item.countdown_time != 0) {
						a++
					}
				})
				this.pickCardList.forEach(item => {
					if (item.is_unpaid != 0) {
						b++
					}
				})
				if (a) {
					return uni.showModal({
						content: "不能同时购买多种提货卡",
						showCancel: false,
						confirmColor: "#D8C07F"
					})
				}
				if (b) {
					return uni.showModal({
						content: "已有其它种类提货卡订单，请先处理",
						showCancel: false,
						confirmColor: "#D8C07F"
					})
				}
				uni.navigateTo({
					url: "./pickCardNo?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 支付待支付订单
			payOrder(item) {
				if (item.is_unpaid == 1 || item.is_unpaid == 2) {
					uni.navigateTo({
						url: "./pickCardStep?orderId=" + item.order_id
					})
				} else if (item.is_unpaid == 3) {
					uni.navigateTo({
						url: "./pickCardStep?orderId=" + item.order_id
					})
				} else if (item.is_unpaid == 4) {
					uni.navigateTo({
						url: "./pickCardAuditFail?orderId=" + item.order_id + "&type=1"
					})
				} else if (item.status == 10) {
					uni.navigateTo({
						url: "./pickCardAuditFail?orderId=" + item.order_id + "&type=3"
					})
				}
			},
			//待签署购买合同
			signedContract(oid, status) {
				if (status == -1 || status == 7) {
					uni.navigateTo({
						url: "./pickCardBuyCon?orderId=" + oid + "&type=1"
					})
				} else if (status == 8) {
					uni.navigateTo({
						url: "./pickCardAuditFail?orderId=" + oid + "&type=2"
					})
				}

			},
			//点击提货卡待使用
			userCard(id, oid) {
				this.card_id = id
				this.oid = oid
				this.$refs.zmodal1.show()
			},
			//提货卡使用记录
			pickCardRecord() {
				uni.navigateTo({
					url: "/mall/pickCardMall/pickCardOrder?type=0"
				})
			},
			// 点击申请收购
			confirm() {
				uni.navigateTo({
					url: "./pickCardAcquisition?orderId=" + this.oid
				})
			},
			// 点击专区提货
			cancel() {
				uni.setStorageSync("card_order_id", this.oid)
				uni.navigateTo({
					url: "/mall/pickCardMall/pickCardMall?id=" + this.card_id
				})
			},
			// 跳转合同页面
			offlineContact(id) {
				uni.navigateTo({
					url: "./pickCardBuyCon?orderId=" + id + "&type=2"
				})
			},
			// *************************服务卡**********************
			getServiceList() {
				serviceList({
					card_id: this.current + 1
				}).then(res => {
					clearInterval(this.serviceTime)
					this.serviceTime = setInterval(() => {
						let list = res.data.map((val, key) => {
							let timestamp = Date.parse(new Date()) / 1000;
							if (!val.detailShow) {
								val.detailShow = false
							}
							if (val.service_status == 1) {
								if (val.valid_time - timestamp < 864000) {
									val.serviceCardTime = utils.timeCount(val.valid_time, true)
								} else {
									val.serviceCardTime = ""
								}
							}
							return val
						});
						this.serviceList = list
						this.loadStatus = 'noMore'
					}, 1000);
				})
			},
			change(e) {
				this.current = e.target.current
				this.serviceList = []
				this.loadStatus = 'loading'
				this.getServiceList()
			},
			cardDetail(item) {
				item.detailShow = !item.detailShow
			},
			//跳转服务卡记录
			serviceRecord() {
				uni.navigateTo({
					url: "./serviceRecord"
				})
			},
			//购买服务卡
			goBuy(item) {
				if (this.userInfo.level > 0) {
					if (item.card_id > this.userInfo.level) {
						this.serviceLevel = 2
						this.$refs.zmodal4.show()
						return
					}
				} else {
					if (item.card_id == 0 || item.card_id == 1) {
						this.serviceLevel = 1
					} else {
						this.serviceLevel = 2
					}
					this.$refs.zmodal4.show()
					return
				}

				if (item.is_exist == 0) {
					uni.navigateTo({
						url: "./serviceCardNo?item=" + encodeURIComponent(JSON.stringify(item))
					})
				} else if (item.is_exist == 1) {
					uni.navigateTo({
						url: "./serviceCardPay?item=" + encodeURIComponent(JSON.stringify(item))
					})
				}

			},
			//服务卡申请
			goApply(id) {
				this.serviceId = id
				this.$refs.zmodal3.show()
			},
			onOnConfirm() {
				uni.showLoading({
					mask: true
				})
				serviceApply({
					order_id: this.serviceId
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "申请成功，请等待审核"
					})
					this.getServiceList()
				})
			},
			// 结束服务
			endService(sn) {
				serviceEnd({
					order_sn: sn
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "结束成功，请等待审核"
					})
					this.getServiceList()
				})
			},
			back() {
				uni.navigateBack({

				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.public__contain {
		.select-header {
			padding-bottom: 50rpx;
			position: relative;
			// height: 576rpx;

			.headerBg {
				position: absolute;
				width: 100%;
				height: 576rpx;
			}

			.carousel {
				padding: 100rpx 0 0;
				height: 500rpx;
				box-sizing: border-box;

				.carousel-item {
					width: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.item {
					height: 400rpx;
				}

				.item-img {
					position: absolute;
					width: 690rpx;
					height: 400rpx;
					border-radius: 10rpx;
				}

				.vipInfo {
					position: relative;
					z-index: 2;

					.top {
						padding: 20rpx;
						height: 129rpx;
						display: flex;
						align-items: center;
						border-bottom: 1rpx solid #D8C07F;

						.a {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
						}

						.b {
							font-size: 30rpx;
							font-weight: 500;
							margin-left: 10rpx;
						}

						.c {
							position: relative;
							margin-left: 10rpx;
							width: 93rpx;
							height: 39rpx;

							image {
								position: absolute;
								top: 0;
								left: 0;
								width: 93rpx;
								height: 39rpx;
							}

							text {
								position: absolute;
								bottom: 4rpx;
								right: 8rpx;
								font-size: 16rpx;
								color: #9E5928;
								z-index: 2;
							}
						}
					}

					.bottom {
						padding: 20rpx;
						border-top: 1rpx solid #FBF4E2;

						.up {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								color: #B1A27D;
								font-size: 24rpx;
							}

							.right {
								display: flex;
								align-items: center;
								color: #B1A27D;

								.lebal {
									font-size: 24rpx;
									margin-right: 4rpx;
								}

								.icon-you {
									margin-top: 4rpx;
									font-size: 20rpx;
								}
							}
						}

						.down {
							display: flex;
							justify-content: space-around;
							margin-top: 40rpx;

							.btn {
								width: 200rpx;
								height: 72rpx;
								background: rgba(255, 255, 255, 1);
								box-shadow: 0px 4rpx 20rpx 0px rgba(177, 141, 57, 0.3);
								border-radius: 36rpx;
								text-align: center;
								line-height: 72rpx;
								color: #371B10;
								font-size: 28rpx;
								letter-spacing: 10rpx;
							}
						}
					}
				}
			}

			.dots {
				position: absolute;
				left: 0;
				bottom: 20rpx;
				display: flex;
				width: 100%;
				justify-content: center;

				.a {
					margin-right: 10rpx;
					width: 30rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: #8B7D5C;
					opacity: .3;
				}

				.act {
					opacity: 1;
				}
			}
		}

		.tourismCard {
			margin-bottom: 30rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;

			.tapBox {
				display: flex;
				height: 88rpx;
				z-index: 2;
				background-color: #fff;

				.cardListTab {
					width: 100%;
					line-height: 88rpx;
					color: #666666;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					// justify-content: center;
					align-items: center;
					position: relative;

					.cardIcon {
						width: 52rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.recode {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 24rpx;
						color: #999;
						line-height: 88rpx;
						font-weight: normal;

						.yticon {
							margin-left: 4rpx;
							font-size: 22rpx;
						}
					}
				}
			}

			.card {
				margin-bottom: 30rpx;
				width: 690rpx;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				height: 200rpx;
				background: linear-gradient(90deg, #209CFF 0%, #68E0CF 100%);
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.label {
					position: absolute;
					left: 36rpx;
					top: 24rpx;
					border-radius: 4rpx;
					padding: 4rpx 10rpx;
					background: rgba(0, 0, 0, .15);
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.left {
					display: flex;
					flex-direction: column;

					.cardName {
						.name {
							font-size: 36rpx;
							font-weight: bold;
							color: #fff;
						}
					}

					.cardDesc {
						margin-top: 16rpx;
						font-size: 30rpx;
						color: #fff;
					}

					.a {
						margin-top: 10rpx;
						display: flex;
						align-items: baseline;
						color: #fff;
						font-size: 30rpx;
						font-weight: bold;

						.d {
							margin-left: 18rpx;
						}
					}

					.b {
						margin-top: 10rpx;
						display: flex;
						align-items: baseline;
						color: #fff;
						font-size: 24rpx;
						opacity: .7;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-end;

					.btn {
						width: 160rpx;
						height: 60rpx;
						background: #fff;
						border-radius: 30px;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						color: #2699F0;
					}
				}
			}

			.marginNone {
				margin: 0;
			}
		}

		.pickCard {
			margin-bottom: 30rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;

			.tapBox {
				display: flex;
				height: 88rpx;
				z-index: 2;
				background-color: #fff;

				.cardListTab {
					width: 100%;
					line-height: 88rpx;
					color: #666666;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					// justify-content: center;
					align-items: center;
					position: relative;

					.cardIcon {
						width: 52rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.recode {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 24rpx;
						color: #999;
						line-height: 88rpx;
						font-weight: normal;

						.yticon {
							margin-left: 4rpx;
							font-size: 22rpx;
						}
					}
				}
			}

			.card {
				width: 690rpx;
				padding: 30rpx 40rpx;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				height: 200rpx;
				background-color: rgba(253, 221, 115, 1);
				background-image: url(../../../static/images/center/qwe32.png);
				background-repeat: no-repeat;
				background-size: 83rpx 52rpx;
				background-position: 18rpx 24rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.left {
					display: flex;
					flex-direction: column;

					.cardName {
						.name {
							font-size: 36rpx;
							font-weight: bold;
							color: #51320F;
						}

						.a {
							position: absolute;
							right: 40rpx;
							top: 46rpx;
							display: flex;
							align-items: center;

							.status {
								font-size: 30rpx;
								font-weight: 500;
								color: #51320F;
							}

							.yticon {
								margin-left: 8rpx;
								width: 34rpx;
								height: 34rpx;
								padding-left: 6rpx;
								box-sizing: border-box;
								text-align: center;
								line-height: 34rpx;
								font-weight: bold;
								border-radius: 50%;
								background: #FEC93B;
								font-size: 20rpx;
								color: #fff;
							}
						}
					}

					.cardDesc {
						margin-top: 16rpx;
						font-size: 30rpx;
						color: #B08F1D;
					}

					.b {
						margin-top: 16rpx;
						display: flex;
						align-items: baseline;
						font-weight: bold;
						color: #B08F1D;

						.c {
							font-size: 24rpx;
						}

						.d {
							margin-left: 10rpx;
							font-size: 40rpx;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-end;

					.btn {
						width: 160rpx;
						height: 60rpx;
						background: #FECB02;
						border-radius: 30px;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						color: rgba(51, 51, 51, 1);
					}

					.b {
						width: 160rpx;
						text-align: center;
						margin-top: 10rpx;
						display: flex;
						justify-content: center;
						color: #51320F;
						font-size: 28rpx;
					}
				}
			}
		}

		.content {
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;

			.tapBox {
				display: flex;
				height: 88rpx;

				.cardListTab {
					width: 100%;
					line-height: 88rpx;
					color: #666666;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					// justify-content: center;
					align-items: center;
					position: relative;

					.card {
						width: 52rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.recode {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 24rpx;
						color: #999;
						line-height: 88rpx;
						font-weight: normal;

						.yticon {
							margin-left: 4rpx;
							font-size: 22rpx;
						}
					}
				}
			}

			.cardList {

				.cardItem {
					overflow: hidden;
					border-radius: 10rpx;
					position: relative;
					color: #fff;
					margin-bottom: 30rpx;

					.bg {
						position: absolute;
						//#ifndef H5
						// z-index: -1;
						//#endif
						left: 0;
						top: 0;
						width: 100%;
						height: 260rpx;
					}

					.top {
						width: 690rpx;
						height: 260rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 30rpx 45rpx;
						position: relative;

						.left {
							.a {
								display: flex;
								align-items: baseline;

								.a-a {
									font-size: 42rpx;
									font-weight: bold;
								}

								.a-b {
									margin-left: 20rpx;
									font-size: 30rpx;
									font-weight: bold;
								}

							}

							.b {
								margin-top: 14rpx;
								display: flex;
								align-items: center;

								image {
									width: 32rpx;
									height: 32rpx;
									border-radius: 50%;
								}

								text {
									margin-left: 10rpx;
									font-size: 30rpx;
								}
							}

							.c {
								margin-top: 14rpx;
								display: flex;
								align-items: center;

								image {
									width: 32rpx;
									height: 32rpx;
									border-radius: 50%;
								}

								text {
									margin-left: 10rpx;
									font-size: 24rpx;
								}
							}

							.d {
								margin-top: 14rpx;
								display: flex;
								align-items: center;

								.da {
									font-size: 28rpx;
								}

								.yticon {
									padding-top: 4rpx;
									text-align: center;
									width: 30rpx;
									height: 26rpx;
									border-radius: 50%;
									color: #333;
									background-color: #fff;
									line-height: 30rpx;
									margin-left: 30rpx;
									font-size: 20rpx;
								}
							}
						}

						.serviceing {
							position: absolute;
							right: 20rpx;
							top: 20rpx;
							padding: 6rpx 16rpx;
							border-radius: 8rpx;
							color: #333;
							background: rgba(255, 255, 255, .7);
							font-size: 24rpx;
						}

						.right {
							width: 150rpx;
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: center;

							.btn {
								width: 128rpx;
								height: 128rpx;
								box-shadow: 0px 5rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
								background-color: #fff;
								color: #333;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;

								text {
									line-height: 34rpx;
									font-size: 28rpx;
									width: 60rpx;
									font-weight: 500;
								}

								.wait {
									width: auto;
								}
							}

							.time {
								font-size: 24rpx;
								margin-top: 20rpx;
								white-space: nowrap;
							}

							.buy {
								width: 112rpx;
								height: 70rpx;
								border-radius: 10rpx;
							}

							.service {
								width: 150rpx;
								height: 70rpx;
								border-radius: 35rpx;

								text {
									width: auto;
								}
							}
						}
					}

					.bottom {
						margin-top: -10rpx;
						position: relative;
						//#ifndef H5
						z-index: -1;
						//#endif
						transition: all .3s linear;

						image {
							width: 100%;
						}
					}
				}
			}
		}
	}
</style>
